<template>
    <div id="yoso">
      <div id="user" v-show="user_top" @mouseover="user_top=true" @mouseleave="user_top=false">
        <div style="width: 100%;height: 80px;text-align: left;">
          <div style="width: 80px;display: inline-block;margin-top: 10px;margin-left: 10px">
            <a href="#/userUpdate"><img :src="user.iconPath" alt="" width="50px" style="display: inline-block"></a>
          </div>
          <div style="width: 177px;height: 60px;float: right;font-size: 12px;color: #999">
            <div style="margin-top: 12px">
              <span style="background-color: black;color: #8a8e5f;border-radius: 3px;width: 30px;display: inline-block">plus</span><span style="float: right;padding-right: 5px"><a href="javascript:void (0)" @click="exit" style="color: #999">退出</a></span>
            </div>
            <div><span><a href="#" style="color: #999">加入plus会员，一年省10000元</a></span></div>
          </div>
        </div>
      </div>
<!--搜索框和购物车-->
<search/>

      <div class="fs format clearfix">

        <div class="fs_left">
          <ul v-for="item in master" :key="item.code">
            <li @mouseover="li_hovered(item.code)" @mouseleave="hover_li = false"><a href="javascript:void (0)" @click="toCommodity(item.id)">{{item.name}}</a></li>
          </ul>
        </div>
<!--轮播图上的商品展示-->
        <div id="show" v-show="hover_li" @mouseover="hover_li=true" @mouseleave="hover_li=false">
          <ul v-for="commodity in curMasterData">
            <li class="commodity">
                <div class="img">
                  <a href="javascript:void (0)" @click="toCartAdd(commodity.id)">
                    <img :src="commodity.photoPathList[0]"/>
                  </a>
                </div>
                <div class="describe"><a href="javascript:void (0)" @click="toCartAdd(commodity.id)" v-html="commodity.details"></a></div>
                <div class="price"><span>￥{{commodity.price}}</span></div>

<!--
              <div><span>{{commodity.c_name}}</span></div>-->

            </li>
          </ul>
        </div>

          <div class="fs_center block">
            <el-carousel height="468px">
              <el-carousel-item v-for="p in lunboList" >
                <img :src="p.info" alt="" width="796px">
              </el-carousel-item>
            </el-carousel>
          </div>


        <div class="fs_right">
          <div class="fs_right_top">
            <div class="usr" v-if="!login">
                    <span>Hi~欢迎逛京东! <br/>
                    <a href="#/login">登录</a>|<a href="#/register">注册</a></span>
          </div>
            <div class="usr" v-if="login">
              <ul>
                <li>
                  <a href="#/userUpdate"><img :src="user.iconPath" alt="" width="50px" style="display: inline-block"></a>
                </li>
                <li>
                  <div><a href="#/userUpdate">{{user.name}}</a></div>
                  <div><a href="javascript:void (0)" @click="exit">退出</a></div>
                </li>
              </ul>

            </div>
            <ul>
              <li class="one"><a href="#">新人福利</a></li>
              <li class="two"><a href="#">PLUS会员</a></li>
            </ul>
          </div>
          <div class="fs_right_center">
            <ul>
              <li class="head_li">京东快报 <a href="#"><em>更多></em></a></li>
              <li class="" v-for="(anew,index) in newsList">
                <a :href="anew.info"><span v-if="(index+1) %2===0">热门</span ><span v-if="(index+1)%2 !== 0">推荐</span>{{anew.tag | ellipsis}}</a>
              </li>
            </ul>
          </div>
          <div class="fs_right_footer">
            <ul>
              <li class="iconfont"><a href="#">&#xe602;</a></li>
              <li class="iconfont"><a href="#">&#xe605;</a></li>
              <li class="iconfont"><a href="#">&#xe60c;</a></li>
              <li class="iconfont"><a href="#">&#xe615;</a></li>
              <li class="iconfont"><a href="#">&#xe616;</a></li>
              <li class="iconfont"><a href="#">&#xe62a;</a></li>
              <li class="iconfont"><a href="#">&#xe62b;</a></li>
              <li class="iconfont"><a href="#">&#xe635;</a></li>
              <li class="iconfont"><a href="#">&#xe63b;</a></li>
            </ul>


          </div>
        </div>
      </div>
      <div class="format" style="width: 990px;height: 80px;background: url('../../static/img/home/tuijian.png')">
      </div>
      <div class="format clearfix" id="tuijian_nav">
        <ul>
          <li>
            <div><a href="javascript:void (0)">精选</a></div>
          </li>
          <li>
            <div><a href="javascript:void (0)">智能先锋</a></div>
          </li>
          <li>
            <div><a href="javascript:void (0)">居家优品</a></div>
          </li>
          <li>
            <div><a href="javascript:void (0)">超市百货</a></div>
          </li>
          <li>
            <div><a href="javascript:void (0)">时尚达人</a></div>
          </li>
          <li>
            <div><a href="javascript:void (0)">进口好物</a></div>
          </li>
        </ul>
      </div>
      <div id="tuijian" class="format clearfix">
        <ul v-for="hot in hots" id="c_ul" :key="hot.id" >
          <li class="commodity">
            <div class="img">
              <a href="javascript:void (0)" @click="toCartAdd(hot.id)" v-if="hot.photoPathList">
                <img :src="hot.photoPathList[0]"/>
              </a>
            </div>
            <div class="describe"><a href="javascript:void (0)" @click="toCartAdd(hot.id)" v-html="hot.details"></a></div>
            <div class="price"><span>￥{{hot.price}}</span></div>
          </li>
        </ul>
      </div>

</div>

</template>

<script>
  import Search from './common/Search'
    export default {
        name: "Home",
      components: {
        Search
      },
      data(){
          return{
            user_top:false,
            hover_li:false,
            user:{},
            login:false,
            //主分类集合
            master:[],
            //主分类下的数据（轮播图上的）
            masterData:{},
            //当前主分类（鼠标放在当前的主分类）
            curMasterData:[],
            goods:[],
            newsList:[],
            lunboList:[],
            //好物推荐
            hots:[{id: "1", tags: ["保暖"], photoPathList: ["vv"]}]
          }

      },
      methods:{
        toCommodity(id){
          this.$router.push('/commodity/'+ id)
        },
        toCartAdd(id){
          this.$router.push('/commodity/single/'+id)
        },

        li_hovered(code){
          this.curMasterData = this.masterData[code];
          this.hover_li = true;
        },
        loginValid(){
          const user = sessionStorage.getItem('user');
          if (user !== null){
            this.user = JSON.parse(user);
            this.login = true
          }
          return user !== null
        },
        exit(){
          sessionStorage.removeItem('user');
          this.login = false;
          this.$msgBus.$emit('loginFlag',this.login);
        },
        paging(){
          //获取轮播图，热词，新闻数据
          this.$axios.get('/dictionary/getData')
            .then(resp=>{
              const result = resp.data;
              if (result.code !== 'success') {
                this.$message.error(result.message)
                return
              }
               this.lunboList = result.data['轮播图'];
               this.newsList = result.data['新闻'];
            })

          // this.user= this.$store.state.user;
          //得到热卖商品
          //todo:当前查询的全部
          this.$axios.get('/commodity/listAll')
            .then(resp=>{
              this.hots = resp.data.data;
            });
          // this.login = this.user.u_id !== undefined;
          //得到商品分类
          this.$axios.get('/commodityClassify/getMasterBranch')
            .then(resp=>{
              this.master = resp.data.data;
            });
          //获取主页主分类展示数据（轮播图上）
          this.$axios.get('/commodity/getShowMasterCommodityData')
            .then(resp=>{
              this.masterData = resp.data.data;
            });
        },

      },
      filters:{
        ellipsis(value){
          if (!value) return '';
          if (value.length > 10) {
            return value.slice(0,10) + '...'
          }
          return value
        },
        describe_length(value){
          if (!value) return '';
          if (value.length > 25) {
            return value.slice(0,25) + '...'
          }
          return value
        }
      },
      created() {
        this.paging();
        this.loginValid();
      },

    }

</script>

<style scoped>
  *{
    padding: 0;
    margin: 0;
  }
  #yoso{
    position: relative;
    background-color: #f4f4f4;
  }
  a {
    color: #333333;
    text-decoration-line: none;
  }
  a:hover{
    color: #c81623;
  }
  .clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix{
    *zoom: 1;
  }
  .format{
    width: 990px;
    margin: 0 auto;
  }

  #user{
    border: 1px solid silver;
    position: absolute;
    width: 270px;
    height: 80px;
    background-color: white;
    left: 550px;
    z-index: 15;
  }

  .fs{
    position: relative;
    height: 468px;
  }
  .fs .fs_left{
    float: left;
    height: 468px;
    width: 192px;
    background-color: #fff;
  }
  .fs .fs_left ul li{
    list-style-type: none;
    font-size: 16px;
    margin: 7px 0;
    padding: 5px 0;
  }
  .fs .fs_left ul li:hover{
    background-color: #d9d9d9;
  }
 #show{
   box-shadow:  6px 3px 5px rgba(135, 156, 97, 0.4);
   padding-right: 20px;
   background-color: #ffedf6;
   position: absolute;
   width: 796px;
   height: 468px;
   z-index: 15;
   left: 190px;
 }
 #show ul .commodity{
   width: 190px;
   height: 266px;
background-color: white;
   float: left;
   margin: 20px;
 }
  #show ul li:hover{
box-shadow: 5px 3px 5px rgba(156, 156, 156, 0.4);
  }


  #tuijian ul .commodity{
    width: 190px;
    height: 266px;
    background-color: white;
    float: left;
    margin-bottom: 10px;
    margin-left: 8px;
  }

  .fs .fs_center{
    float: left;
    height: 468px;
    width: 590px;
    margin: 0 8px;
  }
  .fs .fs_right{
    float: left;
    height: 468px;
    width: 192px;
    background-color: #fff;
  }
  .fs .fs_right .fs_right_top{
    height: 100px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #e3e4e5;
  }
  .fs .fs_right .fs_right_top .usr{
    height: 68px;
  }
  .fs .fs_right .fs_right_top .usr ul li{
    float: left;
  }
  .fs .fs_right .fs_right_top span{
    display: block;
    font-size: 12px;
    padding-top: 16px;
  }
  .fs .fs_right .fs_right_top ul li{
    width: 70px;
    height: 25px;
    font-size: 12px;
    list-style: none;
    float: left;
    margin-left: 21px;
    border-radius: 15px;
    text-align: center;
    line-height: 25px;
  }
  .fs .fs_right .fs_right_top .one{
    background-color: #b7554b;
  }
  .fs .fs_right .fs_right_top .two{
    background-color: #363634;

  }
  .fs .fs_right .fs_right_top .two a{
    color: #968e67;
  }
  .fs .fs_right .fs_right_top .one a{
    color: white;
  }
  .fs .fs_right .fs_right_center{
    height: 128px;
    background-color: #fff;
    border-bottom: 1px solid #e3e4e5;
  }
  .fs .fs_right .fs_right_center li{
    font-size: 12px;
    list-style-type: none;
    text-align: left;
    padding-left: 20px;
    margin-top: 9px;
  }
  .fs .fs_right .fs_right_center li a:hover{
    color: #c81623;
  }
  .fs .fs_right .fs_right_center span{
    background-color: #fdeeed;
    color: #e1251b;
    margin-right: 5px;
  }
  .fs .fs_right .fs_right_footer{
    height: 230px;
    background-color: #fff;
  }
  .fs .fs_right .fs_right_footer ul li {
    list-style-type: none;
    font-size: 50px;
    float: left;
    margin-top: 18px;
    margin-left: 9px;
    width: 50px;
    height: 55px;
  }
  .fs_right_footer ul li :hover{

    box-shadow: 2px 2px 2px 2px rgb(158, 148, 148);
    color: red;
  }
</style>

<!--轮播-->
<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

</style>
<!--为你推荐-->
<style scoped>
  #tuijian ul li:hover{
    box-shadow: 5px 3px 5px rgba(156, 156, 156, 0.4);
  }
  .commodity .img{
    margin-top: 30px;
  }
  .commodity .img img{
    width: 120px;
  }
  .commodity .describe{
    line-height: 1.5;
    margin-left: 10px;
    text-align: center;
    margin-top: 30px;
    width: 170px;
    height: 40px;
    color: #9b9b9b;
    font-size: 12px;
  }
  .commodity .price{
    margin-left: 8px;
    text-align: left;
    margin-top: 8px;
    color: red;
    font-size: 18px;
    font-weight: bolder;
  }
  #tuijian_nav{
    margin-bottom: 12px;
  }
  #tuijian_nav ul li{
    float: left;
    background-color: white;
    padding: 18px 53px;
    font-size: 16px;
    font-weight: bolder;
  }
</style>
